<template>
    <rx-layout>
        <div slot="center" style>
            <rx-fit >
                <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
                    <span class="search-btn-box">
                        <span class="search-btn" @click="searchshow"><i class="iconfont iconguolv"></i>
                            {{$ti18('rxList.leachBtn','过滤')}}
                        </span>
                   </span>
                </div>
                <div btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel" @close="close">
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('title.operationType','操作类型')">
                                    <a-select :options="operationTypeOptions" :placeholder="i18n('title.operationType','操作类型','input')" v-model="queryParam.Q_operator_type__S_LK" allowClear/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :allowRowSelect="false"
                    :multiSelect="false"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-system/system/core/sysDataMove/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10','15','20','50']"
                    id-field="id"
                    :loadDataOnstart="true"
                    @selectChange="onSelectChange">
                      <span slot="status" slot-scope="{text, record}" class="actionIcons">
                          <span>{{text == 0 ? i18n('form.reduced','已还原') : i18n('form.normal','正常') }}</span>
                     </span>
                      <span slot="action" slot-scope="{text, record}" class="actionIcons">
                          <span v-if="record.operatorType == '导入' || record.operatorType == 'Import'" @click.stop="showDatas(record)" :title="i18n('button.viewDataImport','查看导入数据')">
                               {{i18n('button.viewDataImport','查看导入数据')}}
                          </span>
                           <span v-if="record.status == 1 && (record.operatorType == '导入' || record.operatorType == 'Import')"  @click.stop="revert(record)">
                               {{i18n('button.reloadBtn','还原')}}
                           </span>
                     </span>
                    <span slot="appName" slot-scope="{text, record}">
                       {{$i18(record.appName)}}
                    </span>
                </rx-grid>
            </rx-fit>
            <div>
                <a-modal v-model:visible="visible" :title="i18n('title.data','导入数据')" @ok="visible = false;"   width="1200px">
                    <div>
                        <a-table :columns="overrideDataColumns" :data-source="overrideData" :pagination="false"
                                 :scroll="{y:450}"/>
                    </div>
                </a-modal>
            </div>
        </div>
    </rx-layout>
</template>

<script>

import SysAppApi from '@/api/system/core/sysApp'
import AppImport from '@/views/modules/system/core/AppImport';
import {BaseList, Util} from "@lowcode/jpaas-common-lib"
import {mapState} from 'vuex';
import SysAppExport from "@/views/modules/system/core/SysAppExport.vue";

export default {
    name: 'SysDataMoveList',
    mixins: [BaseList],
    components: {
        AppImport
    },
    computed: {
        ...mapState({
            navigation: state => state.appSetting.navigation,
        })
    },
    data() {
        return {
            visible: false,
            // 查询参数
            queryParam: {},
            fitSearch:false,
            // 表头
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'},
                    width: 50
                },
                {
                    title: this.i18n('title.operationType','操作类型'),
                    dataIndex: 'operatorType',
                    width: 100
                },
                {
                    title: this.i18n('title.appType','应用类型'),
                    dataIndex: 'appType',
                    width: 100
                },
                {
                    title:this.i18n('title.quantityUpdate','更新数据数量'),
                    dataIndex: 'updateDataQuantity',
                    width: 130
                },
                {
                    title: this.i18n('title.quantityNew','新增数据数量'),
                    dataIndex: 'addDataQuantity',
                    width: 130
                },
/*                {
                    title: '导入/导出盖数据',
                    dataIndex: 'overrideData'
                },*/
                {
                    title: this.i18n('title.status','状态'),
                    dataIndex: 'status',
                    width: 120,
                    scopedSlots: {customRender: 'status'}
                },
                {
                    title: this.i18n('title.time','导入/导出时间'),
                    dataIndex: 'createTime',
                    width: 170
                },
                {
                    title: this.$ti18('rxList.action','操作'),
                    dataIndex: 'action',
                    width: Util.langSize({'zh-CN':160,'en-US':200,'ja-JP':240,'es-ES':200}),
                    scopedSlots: {customRender: 'action'}
                }
            ],
            appColumn: [
                {
                    title: this.i18n('title.applicationID','应用ID'),
                    dataIndex: 'appId',
                    width: 190
                },{
                    title: this.i18n('title.applicationName','应用名称'),
                    dataIndex: 'appName',
                    scopedSlots: {customRender: 'appName'},
                    width: 200
                }
            ],
            overrideDataColumns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    dataIndex: 'serial',
                    customRender: (text, record, index) => `${index + 1}`,
                    width: 50
                },
                {
                    title: this.i18n('title.serviceModule','服务模块'),
                    dataIndex: 'service',
                    width: 100
                },
                {
                    title:this.i18n('title.tableName','表名'),
                    dataIndex: 'tableName',
                    width: 150
                },
                {
                    title: this.i18n('title.type','类型'),
                    dataIndex: 'type',
                    width: 80
                },
                {
                    title: this.i18n('title.quantity','数量'),
                    dataIndex: 'total',
                    width: 80
                },
                {
                    title: this.i18n('title.dataContent','数据内容'),
                    dataIndex: 'data',
                    ellipsis: true
                },
            ],
            overrideData: [],
            operationTypeOptions:[
                {label:"导出",value:"导出"},
                {label:"导入",value:"导入"},
                {label:"复制",value:"复制"}
            ]
        }
    },
    created() {
        this.getExportConfig();
    },

    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysDataMove",key);
        },
        getExportConfig() {
            let self_ = this;
            SysAppApi.getExportConfig({key: 'hasAppId'}).then(res => {
                if (res.success) {
                    if (res.data == 'yes') {
                        self_.columns.splice(1, 0, ...self_.appColumn);

                    }
                }
            })
        },
        //导入按钮事件方法
        doImport(){
            let self = this;
            Util.open(
                {
                    component: AppImport,
                    curVm: this,
                    widthHeight: ['1100px', '620px'],
                    title: self.i18n('button.dataImport','数据导入'),
                    data: {
                        treeId: null,
                        callback: function (message) {
                            self.$message.success(message);
                            self.refreshGrid();
                        }
                    }
                },function (action) {
                });
        },
        // 数据导出
        exportData() {
            let conf = {
                component: SysAppExport,
                widthHeight: ['480px', '300px'],
                title: this.i18n('button.dataExport','数据导出'),
                curVm: this,
                maxmin: false,
                zIndex: 9969,
                data: {
                    appId: null,
                    appName: null
                }
            };
            //弹出对话框
            const self_ = this;
            Util.open(conf,function (action,data) {
                if(action!='ok') {
                    return;
                }
                //对话框确认后
                SysAppApi.dataExport(data).then(res => {
                    self_.loadData();
                });
                this.$message.info(self_.i18n('form.directory','正在下载中，稍候请前往浏览器的下载目录下查看！'));
            });
        },
        // 数据还原
        async showDatas(record){
            let res = await SysAppApi.getOverrideData(record.fileId);
            this.visible = true;
            if(!res){
                return;
            }
            this.setOneData(res);
        },
        setOneData(data) {
            this.overrideData = [];
            this.setData(data.system, 'system');
            this.setData(data.form, 'form');
            this.setData(data.bpm, 'bpm');
            this.setData(data.portal, 'portal');
            this.setData(data.ureport, 'ureport');
            this.setData(data.job, 'job');
            this.setData(data.screen, 'screen');
            this.visible = true;
        },
        setData(data, type) {
            console.log(data)
            if (data) {
                let length = data.length;
                if (length > 0) {
                    for (let i = 0; i < length; i++) {
                        let templateData = data[i];
                        let addData = templateData.addData;
                        let oldData = templateData.oldData;
                        if (addData.length > 0) {
                            this.overrideData.push({
                                service: type,
                                tableName: templateData.tableName,
                                type: this.$ti18('rxList.add', '新增'),
                                total: addData.length,
                                data: JSON.stringify(addData),
                            });
                        }
                        if (oldData.length > 0) {
                            this.overrideData.push({
                                service: type,
                                tableName: templateData.tableName,
                                type: this.i18n('form.modify','修改'),
                                total: oldData.length,
                                data: JSON.stringify(oldData),
                            });
                        }
                    }
                }
            }

        },

        // 数据还原
        revert(record) {
            let self_ = this;
            this.$confirm({
                title: self_.i18n('title.dataDetermination','数据还原确定'),
                content: self_.i18n('title.dataImported','你确定要还原当前导入数据吗？'),
                okText: self_.$ti18('rxForm.ackBtn','确认'),
                cancelText: self_.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    SysAppApi.dataRevert({id : record.id}).then( res => {
                        self_.loadData();
                        if (res.success) {
                            self_.$message.success(self_.i18n('title.dataSuccess','数据还原成功！'));
                        } else {
                            self_.$message.error(self_.i18n('title.dataFailed','数据还原失败！'));
                        }
                    });
                },
            });
        },
        search(){
            this.$refs.table.loadData()
        },
        cancel() {
            this.resetSearch();
        },
        close(){
            //关闭按钮
            this.fitSearch = false ;
        },
        onSelectChange(selectedRowKeys,selectedRows){
            this.selectedRows = selectedRows;
            this.selectedRowKeys = selectedRowKeys;
        },


    }
}
</script>
<style scoped>

</style>

